<template>
	<view class="top-box">
		<up-steps :current="afterData.status" direction="column">
			<up-steps-item title="申请退款">
			</up-steps-item>
			<up-steps-item title="等待平台处理">
			</up-steps-item>
			<up-steps-item title="退款成功" ></up-steps-item>
		</up-steps>
	</view>
	<view class="top-box">
		<view style="font-size: 28rpx;margin-bottom: 10rpx;">
			退款信息:
		</view>
		<view class="order-item">
			<view class="top">
				<span>订单编号：{{afterData.refund_no}}</span>
			</view>
			<up-divider></up-divider>
			<block  v-for="(proitem,proindex) in afterData.deatils" :key="proindex">
				<view class="bottom">
					<img :src="proitem.order.picture" alt="" class="left" />
					<view class="right">
						<view class="name_price">
							<view class="name">
								{{proitem.order.goods_name}}
							</view>
							<view class="price">
									￥
									<text class="text">{{proitem.order.price}}</text>
								</view>
							</view>
							<view class="size">
								<span>{{proitem.order.attr}}</span> x{{proitem.order.num}}
							</view>
					</view>
				</view>
			</block>
		</view>
		<up-cell-group :border="false">
				<up-cell :border="false" title="退款原因" :value="afterData.refund_desc" ></up-cell>
				<up-cell :border="false" title="退款金额" :value="afterData.refund_amount" ></up-cell>
				<up-cell :border="false" title="申请时间" :value="afterData.refund_time" ></up-cell>
				<up-cell :border="false" title="退款编号" :value="afterData.refund_no"></up-cell>
		</up-cell-group>
	</view>
	<view style="display: flex;justify-content: center;align-items: center;font-size: 28rpx;">
		<view style="margin-right: 20rpx;display: flex;">
			<up-icon name="phone"></up-icon>&nbsp;
			拨打电话
		</view> |
		<view style="margin-left: 20rpx;display: flex;"> 
			<up-icon name="kefu-ermai"></up-icon>&nbsp;
			联系客服
		</view>
	</view>
	<view>
		<up-button type="info" customStyle="width: 140rpx;height: 62rpx;margin-top:20rpx;float:right;margin:20rpx" shape="circle" :plain="true" :hairline="true" color="#292A2E" text="撤销申请" @click.stop="apply()"></up-button>
	</view>
</template>

<script>
	import {
		http
	} from 'uview-plus'
	export default {
		data() {
			return {
				afterData: {}
			}
		},
		async onLoad(options) {
			await http.get('/shop/after/sale/read',{
				params: {
					after_sale_id: options.after_sale_id
				}
			}).then(res => {
				this.afterData = res
			})
		},
		methods:{
			async apply(){
				await http.get('/shop/after/sale/cancel',{params:{after_sale_id:this.afterData.id}})
			}
		}
	}
</script>

<style lang="scss">
	.top-box{
		width: 724rpx;
		border-radius: 12rpx;
		border: 1px solid #DCDCDC;
		padding:20rpx;
		box-sizing: border-box;
		margin: 17rpx auto;
	}
	.order-item {
		border-radius: 20px;
		box-sizing: border-box;
		
		.top {
			font-size: 26rpx;
			font-weight: normal;
			color: #8D8989;
			@include flex(row);
			justify-content: space-between;
			align-items: center;
		}
		.middle{
			width: 678rpx;
			height: 156rpx;
			border-radius: 10rpx;
			opacity: 1;
			margin: auto;
			margin-bottom: 20rpx;
			background: #F9F9F9;
			padding:20rpx;
			box-sizing: border-box;
			@include flex(row);
			align-items: center;
			justify-content: space-between;
			.middle_left{
				height: 100%;
				.img{
					width: 32.48rpx;
					height: 32rpx;
				}
			}
			.middle_middle{
				height: 100%;
				width: 600rpx;
				margin-left: 14rpx;
				@include flex(column);
				justify-content: space-between;
				font-size: 24rpx;
				color: #8D8989;
				line-height: 37.44rpx;
				.status{
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}
		}
		.bottom {
			@include flex(row);
		
			.left {
				width: 150rpx;
				height: 150rpx;
			}
		
			.right {
				flex: 1;
				margin-left: 12rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #272727;
		
				.name_price {
					@include flex(row);
					justify-content: space-between;
		
					.name {
						width: 300rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
		
					
				}
		
				.size {
					width: 100%;
					font-size: 24rpx;
					font-weight: normal;
					color: #737373;
					margin-top: 6rpx;
					display:flex;
					justify-content: space-between
				}
			}
		
		}
		.btn-box{
			@include flex(column);
			justify-content: flex-end;
			align-items: flex-end;
			.btn{
				@include flex(row)
			}
		}
		.price {
			font-size: 20rpx;
			.text {
				font-weight: 500;
				font-size: 28rpx;
			}
		}
	}
</style>